
import React, { useState, useEffect } from 'react'
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import btcIcon from '../../assets/img/icon/btc.png'
import ethIcon from '../../assets/img/icon/eth.png'
import usdtIcon from '../../assets/img/icon/usdt.png'
import cardIcon from '../../assets/img/icon/card.png'
import aliIcon from '../../assets/img/icon/alipay.png'
import minerImg from '../../assets/img/miner.png'
import classicIcon from '../../assets/img/classic.png'
import fastIcon from '../../assets/img/fast.png'
import './index.scss';
import { Button, Checkbox, Col, InputNumber, Layout, Row, Select, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
const { Content } = Layout;
const { Option } = Select;

function MinerDetail(props) {

    const [payIndex, setPayIndex] = useState(0)
    const [payList, setPayList] = useState([
        { name: 'BTC', icon: btcIcon },
        { name: 'ETH', icon: ethIcon },
        { name: 'USDT', icon: usdtIcon },
        { name: '银行卡', icon: cardIcon },
        { name: '支付宝', icon: aliIcon }
    ])

    const selectPay = index => {
        setPayIndex(index)
    }

    const payItem = (value, index) => {
        return (
            <div key={index} className={index === payIndex ? "pay-item-active" : "pay-item"} onClick={() => selectPay(index)}>
                <img className="pay-icon" src={value.icon} />{value.name}
            </div>
        )
    }

    const moneyOption = {
        title: {
            text: "单位：USDT",
            left: 'center',
            bottom: 15,
            textStyle: {
                fontSize: 16,
                fontWeight: 500
            }
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            type: 'value'
        },

        legend: {
            show: true,
            data: ['投入成本', '总电费', '静态总产出']
        },
        series: [
            {
                name: '投入成本',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#F8B657'
                    },
                },
                itemStyle: {
                    color: '#AEB0BC'
                },
                data: [434.8]
            },
            {
                name: '总电费',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#F8B657'
                    },
                },
                itemStyle: {
                    color: '#F8B657'
                },
                data: [96.84]
            },
            {
                name: '静态总产出',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#F8B657'
                    },
                },
                itemStyle: {
                    color: '#3F90FA'
                },
                data: [588.38]
            }
        ]
    };

    const dayOption = {
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
        },
        legend: {
            data: ['静态回本', '套餐周期']
        },
        series: [
            {
                name: '静态回本',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside',
                    textStyle: {
                        color: '#fff'
                    },
                },
                itemStyle: {
                    color: '#F8B657'
                },
                data: [180]
            },
            {
                name: '套餐周期',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside',
                    textStyle: {
                        color: '#fff'
                    },
                },
                itemStyle: {
                    color: '#3F90FA'
                },
                data: [160]
            }
        ]
    };


    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>
                <div className="minerDetail main">
                    <Row className="minerDetail-head" >
                        <div className="minerDetail-head-left">
                            <h3>蚂蚁矿机S19套餐</h3>
                            <p>——矿机信息——</p>
                            <img className="minerDetail-head-img" src={minerImg} />
                            <div className="status"><img src={fastIcon} /></div>
                            <div className="minerDetail-list">
                                <Row className="minerDetail-list-row">
                                    <Col className="minerDetail-list-title" span={12}>矿机算力</Col>
                                    <Col className="minerDetail-list-cont" span={12}>95 TH/s</Col>
                                </Row>
                                <Row className="minerDetail-list-row">
                                    <Col className="minerDetail-list-title" span={12}>矿机功率</Col>
                                    <Col className="minerDetail-list-cont" span={12}>3250 W</Col>
                                </Row>
                                <Row className="minerDetail-list-row">
                                    <Col className="minerDetail-list-title" span={12}>能效比</Col>
                                    <Col className="minerDetail-list-cont" span={12}>34.5 J/T</Col>
                                </Row>
                            </div>
                        </div>
                        <div className="minerDetail-head-right">
                            <h2>蚂蚁矿机S19/480天/100T/BTC-加速回本云挖矿套餐</h2>
                            <Row className="minerDetail-right-gray" align="middle">
                                <Col lg={12}>算力费<span>$</span><big>6209.00</big></Col>
                                <Col lg={12}>每日电费<p>$5.39/天</p></Col>
                            </Row>
                            <Row className="minerDetail-head-row" align="middle">
                                <Col className="title">挖矿币种 </Col>
                                <Col><img src={btcIcon} />BTC </Col>
                            </Row>
                            <Row className="minerDetail-head-row" align="middle">
                                <Col className="title">算力数量 </Col>
                                <Col>100THS</Col>
                            </Row>
                            <Row>
                                <Button className="buy-btn" type="primary">立即购买</Button>
                            </Row>
                        </div>
                    </Row>
                    <div className="minerDetail-title">
                        <h3>套餐详情</h3>
                    </div>
                    <div className="detail">
                        <Row className="detail-row">
                            <Col span={8}>套餐名称：云算力BTC180天套餐</Col>
                            <Col span={8}>电费单价：$0.0538 /THS/天 </Col>
                            <Col span={8}>交付日期：立即交付</Col>
                        </Row>
                        <Row className="detail-row">
                            <Col span={8}>套餐周期：180天</Col>
                            <Col span={8}>管理费用：0 % </Col>
                            <Col span={8}>算力数量：10 THS</Col>
                        </Row>
                    </div>
                    <div className="minerDetail-title">
                        <h3>收益分析</h3><span>（只供参考）</span>
                    </div>
                    <div className="detail">
                        <Row className="detail-box">
                            <Col className="detail-box-item" span={8}>
                                <p className="title">总算力费</p>
                                <p>$434.80</p>
                            </Col>
                            <Col className="detail-box-item" span={8}>
                                <p className="title">每日电费</p>
                                <p>$434.80</p>
                            </Col>
                            <Col className="detail-box-item" span={8}>
                                <p className="title">每日静态产出</p>
                                <p>$434.80</p>
                            </Col>
                        </Row>
                        <Row className="detail-row" justify="space-between">
                            <div className="detail-chart">
                                <p >静态收益<span>13.05%</span></p>
                                <ReactEcharts option={moneyOption} />
                            </div>
                            <div className="detail-chart">
                                <p>静态回本天数<span>160天</span></p>
                                <ReactEcharts option={dayOption} />
                            </div>
                        </Row>
                        <div className="detail-fun">
                            <h3>相关计算方法：</h3>
                            <p>1、总算力费=投入成本=购买的总算力数量*该套餐的算力单价<br />
                            2、每日电费=该套餐的电费单价*购买的总算力数量<br />
                            3、总电费=每日电费*该套餐的周期天数<br />
                            4、静态分析是一种假定未来的各项数据静止不变的分析方法，即假定未来的法币价格、全网难度、区块奖励都静态不变的情况下计算收益率和回本天数等指标;<br />
                            5、静态回本天数=总算力费/（每日静态产出-每日电费-每日管理费）<br />
                            6、预计总收益=套餐周期*（每日静态产出-每日电费-每日管理费）<br />
                            7、静态收益率=（预计总收益/投入成本-1）*100%<br />
                            8、挖矿产出数据来源于BTC.com、sparkpool矿池等,仅供参考</p>
                        </div>
                    </div>
                    <div>
                    </div>
                    <div className="minerDetail-title">
                        <h3>常见问题</h3>
                    </div>
                    <div className="detail">
                        <p>甲方提供</p>
                    </div>
                </div>
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default MinerDetail